<template>
<div id="cp-div" >
      <div class="cp-box">
        <div style="padding-top: 15px;">
          <h1 >修改密码</h1>
        </div>
        <div style="padding-top: 10px">
          <h3>请输入原密码:</h3>
          <div style="width:350px">
            <el-input  :minlength='6' :maxlength="14" v-model="oldPassword" placeholder="原密码" show-password></el-input>
          </div>
        </div>
        <div style="padding-top: 10px">
          <h3>请输入新密码:</h3>
          <div style="width:350px">
            <el-input :minlength='6' :maxlength="14"  v-model="newPassword" placeholder="新密码需要长度6-14位,包含字母/数字" show-password></el-input>
          </div>
        </div>
        <div style="padding-top: 10px">
          <h3>再次输入新密码:</h3>
          <div style="width:350px">
            <el-input :minlength='6' :maxlength="14"  v-model="newPassword2" placeholder="两次输入新密码需一致" show-password></el-input>
          </div>
        </div>
        <div style="padding-top: 20px">
          <el-button @click="changePassword" :loading="changeMsg" type="primary" style="width: 350px">确认修改</el-button>
        </div>
      </div>
</div>

</template>

<script>
import {get,post} from "../../utils/request";

export default {
  name: "ChangePassword",
  data(){
    return{
      oldPassword:'',
      newPassword:'',
      newPassword2:'',
      temp1:false,
      changeMsg:false
    }
  },
  created() {
    get("/api/v1/token/test2").then(resp=>{
    })
  },
  methods:{
    changePassword(){

      this.temp1=false
      var oldPassword = this.oldPassword.replace(/\s*/g,"");
      if (oldPassword===''){
        this.$message.error("原密码不能为空")
        return
      }
      var newPassword = this.newPassword.replace(/\s*/g,"");
      var newPassword2 = this.newPassword2.replace(/\s*/g,"");
      if (newPassword===''){
            this.$message.error("新密码不能为空")
            return;
      }
      if (newPassword2===''){
        this.$message.error("请在输入一次密码")
        return;
      }

      if (newPassword.length<6){
        this.$message.error("新密码长度需大于6位")
        return;
      }
      var regNumber = /\d+/; //验证0-9的任意数字最少出现1次。
      var regString = /[a-zA-Z]+/; //验证大小写26个字母任意字母最少出现1次。
      if (!regNumber.test(newPassword)){
        this.$message.error("新密码设置不符合规则(必须包含字母/数字)")
        return;
      }
      if (!regString.test(newPassword)){
        this.$message.error("新密码设置不符合规则(必须包含字母/数字)")
        return;
      }

      if (newPassword!==newPassword2){
        this.$message.error("两次密码输入不一致")
        return;
      }

      if (newPassword===oldPassword){
        this.$message.error("新密码与旧密码不能一致")
        return;
      }
      this.changeMsg=true
      post("/api/v1/changePassword/step1",oldPassword).then(resp=>{
        // console.log(resp.data.code)
        if (resp.data.code===1) {
          post("/api/v1/changePassword/step2", newPassword).then(resp => {
            if (resp.data.code===1){
              this.$message({
                message: '修改密码成功,下次登录请用新密码登录',
                type: 'success'
              });
              this.changeMsg=false
            }else {
              this.$message({
                message: '系统出错，修改密码失败',
                type: 'error'
              });
              this.changeMsg=false
            }

          }).catch(resp=>{
            this.$message.error("系统好像出问题了,快去找开发")
            this.changeMsg=false
          })
        }else {
          this.$message.error("旧密码错误")
        }

      })



    }
  }
}
</script>

<style scoped>
#cp-div{
  background-color: #f2f4fa;
  width: 100%;
  height: 692px;

}
.cp-box{
  margin-top: 40px;
  margin-left: 60px;
  width: 91%;
  height: 600px;
  padding-left: 17px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
